<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#yuan{
				width: 50px;
				height: 50px;
				background: yellow;
				border-radius:50% ;
				/*圆的位置：定位*/
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="yuan"></div>
		<script>
			/*document的点击事件：
			 1.获取鼠标点击的位置（坐标）
			 2.计算圆形的位置
			 3.显示圆形（在鼠标点击的位置）*/
        var yuan=document.getElementById('yuan');
        //页面\文档的鼠标点击事件
        document.onclick=function(){
            var x=event.pageX;
            var y=event.pageY;
            //计算圆形的位置
            x=x-yuan.offsetWidth/2;
            y=y-yuan.offsetWidth/2;
            //圆形显示在点击的位置
            yuan.style.left=x+'px';
            yuan.style.top=y+'px';
        }
		
		</script>
	</body>
</html>
